<template>
  <el-container class="app-container">
    <el-header class="app-header" v-if="!isHomePage && !hideNav">
      <div class="nav-container">
        <router-link to="/" class="logo">
          <img src="http://127.0.0.1:9010/conference/conference_logo.jpg" alt="会务管理系统" class="logo-image">
          <span>会务管理系统</span>
        </router-link>
        <div class="nav-content">
          <div class="nav-links">
            <router-link to="/" class="nav-item" :class="{ active: route.path === '/' }">
              <el-icon><HomeFilled /></el-icon>
              首页
            </router-link>
            <router-link to="/conferences" class="nav-item" :class="{ active: route.path === '/conferences' }">
              <el-icon><Calendar /></el-icon>
              会议管理
            </router-link>
            <router-link to="/statistics" class="nav-item" :class="{ active: route.path === '/statistics' }">
              <el-icon><DataLine /></el-icon>
              会议数据统计
            </router-link>
          </div>
          
          <!-- 个人信息区域 -->
          <div class="user-profile" v-if="userInfo">
            <el-dropdown trigger="click">
              <div class="user-info">
                <el-avatar 
                  :size="32" 
                  :src="userInfo.avatar" 
                  class="user-avatar"
                >
                  {{ userInfo.fullName?.charAt(0) || userInfo.username?.charAt(0) }}
                </el-avatar>
                <span class="user-name">{{ userInfo.fullName || userInfo.username }}</span>
                <el-icon class="dropdown-icon"><CaretBottom /></el-icon>
              </div>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="goToDashboard">
                    <el-icon><User /></el-icon>
                    个人中心
                  </el-dropdown-item>
                  <el-dropdown-item @click="handleLogout">
                    <el-icon><SwitchButton /></el-icon>
                    退出登录
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
          <div class="auth-buttons" v-else>
            <el-button type="primary" @click="goToLogin">登录</el-button>
            <el-button @click="goToRegister">注册</el-button>
          </div>
        </div>
      </div>
    </el-header>
    <el-main class="app-main" :class="{ 'no-padding': isHomePage || hideNav }">
      <router-view></router-view>
    </el-main>
  </el-container>
</template>

<script setup>
import { HomeFilled, Calendar, DataLine, CaretBottom, User, SwitchButton } from '@element-plus/icons-vue'
import { computed, ref, onMounted, provide, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'

const route = useRoute()
const router = useRouter()
const isHomePage = computed(() => route.path === '/')
const hideNav = computed(() => route.meta.hideNav)
const userInfo = ref(null)

// 提供全局用户信息状态
provide('userInfo', userInfo)

// 提供更新用户信息的方法
const updateUserInfo = (info) => {
  userInfo.value = info
}
provide('updateUserInfo', updateUserInfo)

// 检查并更新用户信息
const checkAndUpdateUserInfo = () => {
  const storedUserInfo = localStorage.getItem('userInfo')
  if (storedUserInfo) {
    try {
      const parsedUserInfo = JSON.parse(storedUserInfo)
      userInfo.value = parsedUserInfo
    } catch (error) {
      console.error('解析用户信息失败:', error)
      localStorage.removeItem('userInfo')
      userInfo.value = null
    }
  } else {
    userInfo.value = null
  }
}

// 监听路由变化
watch(
  () => route.path,
  (newPath, oldPath) => {
    // 当从登录页面返回时，检查并更新用户信息
    if (oldPath === '/login' || newPath === '/') {
      checkAndUpdateUserInfo()
    }
  }
)

// 初始化用户信息
onMounted(() => {
  checkAndUpdateUserInfo()
})

// 导航方法
const goToLogin = () => {
  router.push('/login')
}

const goToRegister = () => {
  router.push('/register')
}

const goToDashboard = () => {
  router.push('/personal-center')
}

const handleLogout = () => {
  localStorage.removeItem('token')
  localStorage.removeItem('userInfo')
  userInfo.value = null
  ElMessage.success('退出登录成功')
  router.push('/')
  setTimeout(() => {
    ElMessageBox.confirm(
      '您已退出登录，是否立即登录？',
      '提示',
      {
        confirmButtonText: '去登录',
        cancelButtonText: '去注册',
        showClose: true,
        distinguishCancelAndClose: true,
        type: 'info',
        closeOnClickModal: false
      }
    )
    .then(() => {
      router.push('/login')
    })
    .catch((action) => {
      if (action === 'cancel') {
        router.push('/register')
      }
      // 当点击关闭按钮或遇到错误时，保持在首页
      // 不做任何路由跳转
    })
  }, 300)
}
</script>

<style>
.app-container {
  min-height: 100vh;
}

.app-header {
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  position: fixed;
  width: 100%;
  z-index: 1000;
  padding: 0;
  height: 60px !important;
}

.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #2c3e50;
  font-size: 20px;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
}

.logo:hover {
  color: #409EFF;
  transform: translateY(-1px);
}

.logo-image {
  width: 40px;
  height: 40px;
  object-fit: contain;
  border-radius: 8px;
  background: white;
  padding: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.logo:hover .logo-image {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.2);
}

.nav-content {
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav-links {
  display: flex;
  gap: 32px;
  align-items: center;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #606266;
  text-decoration: none;
  font-size: 15px;
  padding: 8px 12px;
  border-radius: 6px;
  transition: all 0.3s ease;
  position: relative;
}

.nav-item:hover {
  color: #409EFF;
  background: rgba(64, 158, 255, 0.1);
}

.nav-item.active {
  color: #409EFF;
  font-weight: 500;
}

.nav-item.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 3px;
  background: #409EFF;
  border-radius: 2px;
}

.nav-item .el-icon {
  font-size: 16px;
}

.app-main {
  padding-top: 80px;
  background: #f5f7fa;
  min-height: calc(100vh - 60px);
}

.app-main.no-padding {
  padding-top: 0;
}

.user-profile {
  position: relative;
  margin-left: 16px;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.user-info:hover {
  background: rgba(64, 158, 255, 0.1);
}

.user-avatar {
  border: 2px solid rgba(64, 158, 255, 0.2);
  transition: all 0.3s ease;
}

.user-name {
  font-size: 14px;
  color: #606266;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dropdown-icon {
  font-size: 12px;
  color: #909399;
  transition: transform 0.3s ease;
}

.user-info:hover .dropdown-icon {
  transform: rotate(180deg);
}

.auth-buttons {
  display: flex;
  gap: 12px;
}

:deep(.el-dropdown-menu__item) {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
}

:deep(.el-dropdown-menu__item .el-icon) {
  font-size: 16px;
}

/* 移动端适配 */
@media screen and (max-width: 768px) {
  .nav-container {
    padding: 0 16px;
  }

  .logo {
    font-size: 18px;
    gap: 8px;
  }

  .logo-image {
    width: 32px;
    height: 32px;
  }

  .nav-links {
    gap: 16px;
  }

  .nav-item {
    font-size: 14px;
    padding: 6px 8px;
  }

  .nav-item .el-icon {
    font-size: 14px;
  }

  .nav-content {
    gap: 16px;
  }

  .user-name {
    max-width: 80px;
  }

  .auth-buttons {
    gap: 8px;
  }

  .auth-buttons .el-button {
    padding: 6px 12px;
    font-size: 13px;
  }
}

/* 深色模式支持 */
@media (prefers-color-scheme: dark) {
  .app-header {
    background: #1a1a1a;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  }

  .logo {
    color: #ffffff;
  }

  .logo-image {
    background: rgba(255, 255, 255, 0.9);
  }

  .nav-item {
    color: #909399;
  }

  .nav-item:hover {
    background: rgba(64, 158, 255, 0.15);
  }

  .app-main {
    background: #141414;
  }

  .user-name {
    color: #e5eaf3;
  }
  
  .user-info:hover {
    background: rgba(64, 158, 255, 0.15);
  }
  
  .dropdown-icon {
    color: #a3a6ad;
  }
}
</style> 